window.addEventListener('load', function() {
    //1.分类数据渲染功能
    //1.1定义数据源
    let apiCateDate = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ];
    let classifyList = getEle('#classifyList');
    // 渲染数据
    apiCateDate.forEach((v) => {
        let li = document.createElement('li')
        li.setAttribute('data-keyword', v.keyword);
        if (v.isnew) {
            li.classList.add('fw700');
        }
        li.innerText = v.name;
        classifyList.appendChild(li);
    });
    let searchValue = getEle('#searchValue');
    let inputValue = getEle('#inputValue');
    let lis = getEleAll('#classifyList li');
    // 初始化li
    lis[0].classList.add('active');
    // 绑定事件
    classifyList.addEventListener('click', function(e) {
        let kewd = e.target.getAttribute('data-keyword');
        if (kewd) {
            lis.forEach(v => {
                v.classList.remove('active');
            })
            e.target.classList.add('active');
            searchValue.innerText = e.target.innerText;
            inputValue.placeholder = kewd;
        }
    });


    // 渲染api列表内容
    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南2", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证2", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报2", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验2", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务2", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南3", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证3", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验3", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务3", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南4", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证4", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验4", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务4", price: "￥0.0400/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务5", price: "￥0.0400/次", isSpecial: true },
    ];
    let pageList = getEle('#pageList');
    let currentPage = 0; //开始索引
    let totalSize = listDataArr.length; //总记录数
    // 定义变量
    let sPages = 5; //每页显示的个数
    let totalPageNum = Math.ceil(totalSize / sPages); //总页数
    for (let i = 1; i <= totalPageNum; i++) {
        let a = document.createElement('a');
        a.setAttribute('data-index', i);
        a.innerText = i;
        if (i == 1) {
            a.classList.add('selected');
        }
        pageList.appendChild(a);
    }

    function rander(datas, currentPage, sPages) {
        let newDataArr = [];
        let pagesData = datas.slice(currentPage, sPages);
        pagesData.forEach((v) => {
            newDataArr.push(`
            <li>
            ${v.isSpecial ? '<span>企业专用</span>':''} 
            <a href="" class="content">
                <img src="./images/${v.img}" alt="">
                <h2 class="font14 c666 mb8">${v.name}</h2>
                <span class="font16 fw700 ${v.price=='免费'?'typeGreen':'typeRed'}">${v.price}</span>
                <p>身份证二要素官方实名核验，传入姓名、身份证号，校验此二要素是否一致。直连官方权威渠道， 精准实时核验，毫秒级响应，零缓存，xxxxxxxx</p>
            </a>
            <a href="" class="api-btn">申请数据</a>
        </li>
            `);
        });
        let apiContent = getEle('.api-content');
        apiContent.innerHTML = newDataArr.join('');
    };
    rander(listDataArr, 0, 5);
    //获取所有分页按钮
    let as = getEleAll('#pageList a');
    // 点击跳转
    pageList.addEventListener('click', function(e) {
        let dateIndex = e.target.getAttribute('data-index');
        if (dateIndex) {
            currentPage = (dateIndex - 1) * sPages;
            rander(listDataArr, currentPage, dateIndex * sPages);
            clearStypeA();
            e.target.classList.add('selected');
        }
    });
    let nextBtn = getEle('#nextBtn');
    nextBtn.addEventListener('click', function() {
        let nextA = getEle('#pageList a[class="selected"]').nextElementSibling;
        let index = nextA.innerText;
        currentPage = (index - 1) * sPages;
        clearStypeA()
        nextA.classList.add('selected');
        rander(listDataArr, currentPage, index * sPages);
    });
    // 清除样式
    function clearStypeA() {
        for (let i = 0; i < as.length; i++) {
            as[i].classList.remove('selected')
        }
    }
})